<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <p slot="title">{{ title }}</p>
    <el-form
      ref="formData"
      :model="formData"
      class="base-pipeline-layout"
      label-width="130px"
      :rules="formRules"
      status-icon
    >
      <el-form-item :label="customer.name" prop="customerPersonName">
        <el-input
          v-model="formData.customerPersonName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item :label="customer.mobilePhone" prop="mobilePhone">
        <el-input v-model="formData.mobilePhone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="customer.fixedPhone" prop="fixedPhone">
        <el-input v-model="formData.fixedPhone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="customer.email" prop="email">
        <el-input v-model="formData.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="customer.post" prop="post">
        <el-input v-model="formData.post" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="customer.primaryContact" prop="primaryContact">
        <el-switch
          v-model="formData.primaryContact"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item :label="customer.contactStatus" prop="contactStatusCode">
        <el-switch
          v-model="formData.contactStatusCode"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="base-dialog-footer">
      <el-button :disabled="!submitLoad" type="primary" @click="submitForm">{{
        operateType.save
      }}</el-button>
      <el-button @click="handleClose">{{ operateType.cancel }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { create, get, update } from "../../../api/SysBusiness/CustomerPerson";
import { phoneVerify } from "../../../utils/validate";
import _ from "lodash";

export default {
  name: "ContactPersonDialog",
  components: {},
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    customerPersonId: {
      type: [String, Number],
      default: "",
    },
    customerId: {
      type: [String, Number],
      default: "",
    },
    updateState: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    // 电话号验证
    var mobilePhone = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (phoneVerify(value)) {
          callback();
        } else {
          callback(new Error(this.$t("Customer.enterCorrectPhoneNumber")));
        }
      }
    };
    return {
      submitLoad: true,
      title: "",
      dialogVisible: false,
      formData: {
        id: 0,
        // 客户id
        sysBusinessCustomerId: 0,
        // 联系人名称
        customerPersonName: "",
        // 移动电话
        mobilePhone: "",
        // 固定电话
        fixedPhone: "",
        // 是否为主要联系人
        primaryContact: 0,
        // 联系人状态
        contactStatusCode: 1,
        // 岗位
        post: "",
        email: "",
        // 序号
        num: "",
      },
      formRules: {
        customerPersonName: [
          {
            required: true,
            message: this.$t("Customer.nameRequired"),
            trigger: "blur",
          },
        ],
        mobilePhone: [
          {
            message: this.$t("Customer.enterCorrectPhoneNumber"),
            trigger: ["blur", "change"],
            validator: mobilePhone,
          },
        ],
        email: [
          {
            type: "email",
            message: this.$t("Customer.enterCorrectEmail"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    customer() {
      return this.$t("Customer") || {};
    },
  },
  watch: {},
  created() {
    if (!this.updateState) {
      this.title = this.$t("Customer.addCustomerContactPerson");
      if (this.customerId !== null && this.customerId !== "") {
        this.formData.sysBusinessCustomerId = this.customerId;
      }
    } else {
      this.title = this.$t("Customer.updateCustomerContactPerson");
      get({ id: this.customerPersonId }).then((res) => {
        this.formData = res.data;
      });
    }

    this.dialogVisible = this.dialogFormVisible;
  },
  methods: {
    // 保存
    submitForm: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;
        this.$refs["formData"].validate((valid) => {
          if (valid) {
            if (!this.updateState) {
              create(this.formData)
                .then((res) => {
                  this.$emit("contactPersonClose", res.data);
                  this.handleClose();
                })
                .catch((res) => {
                  this.submitLoad = true;
                });
            } else {
              update(this.formData)
                .then((res) => {
                  this.$emit("contactPersonClose", this.formData);
                  this.handleClose();
                })
                .catch((res) => {
                  this.submitLoad = true;
                });
            }
          } else {
            this.submitLoad = true;
          }
        });
      }
    }, 2000),
    // 关闭弹框
    handleClose() {
      this.$emit("update:dialogFormVisible", false);
      this.submitLoad = true;
      this.dialogVisible = false;
    },
  },
};
</script>
